<script lang="ts" setup>
import { appWindow,LogicalSize } from '@tauri-apps/api/window'
import { onMounted,ref,reactive } from 'vue';
import { useRoute } from 'vue-router'
import { lnk } from '../types'
import rightMenu from '../components/rightMenu.vue'
import { windowPosition,forbidSelect } from '../composables/common'
windowPosition()
forbidSelect()
const route = useRoute()
// 行数
const row = ref<number>();
// 列数
const col = ref<number>();
// 最大容量
const total = ref<number>(1);
// 控制显示
const show = ref<boolean>(false); 
// lnk 列表
const lnks = reactive<lnk[]>([]);
// 初始化
onMounted(async ()=>{
    let storagelnk = getlnk();
    lnks.push(...storagelnk);
    row.value = parseInt(route.params.row as string);
    col.value = parseInt(route.params.col as string);
    total.value = row.value * col.value;
    // 由于tuari的窗口在创建的时候大小是大于80px 必须重新调整大小
    appWindow.setSize(new LogicalSize((60*col.value+10*(col.value+1)),(60*row.value+10*(row.value+1))))
    show.value = true
    savelnk();
});

//#region 放置lnk

const dragstart =  function(event:DragEvent,index:number,item:lnk){
    console.log('start',index)
    event.dataTransfer?.setData(appWindow.label,index.toString());
    event.dataTransfer?.setData('lnk',JSON.stringify(item));
}


// 阻止默认事件
const dragover = function(event:DragEvent){
    event.preventDefault();
}
// 根据拖拽的图标添加图标
const drop = function(event:DragEvent){
    event.preventDefault();
    // 从主窗口拖拽
    if(event.dataTransfer?.getData('lnk') != undefined){
        let data:any =JSON.parse(event.dataTransfer?.getData('lnk'))
        
        // 超出容量
        if(lnks.length==total.value){
            // alert('超出容量！');
            return
        };

        // 筛选去重
        let filterdata = lnks.filter((item,index,arr)=>{
            return item.exec == data.exec;
        })

        // 去重
        if(filterdata.length>=1){
            // alert('重复项');
            return
        }
        
        // 插入lnk
        lnks.push(data);
    }


    savelnk();
}

const droplnk = function(event:DragEvent,index:number,item:lnk){
    if(event.dataTransfer?.getData(appWindow.label) != undefined){
        let dragindex:any =event.dataTransfer?.getData(appWindow.label)
        lnks[index] = lnks[dragindex];
        lnks[dragindex] = item;
    }
}

import { open } from '@tauri-apps/api/shell'
import { convertFileSrc } from '@tauri-apps/api/tauri';
const execCommand =async function(exec:string){
    // await open("C:/Users/Angel/Pictures/a.jpg")
    await open(exec)
}

//#endregion

//#region storage

const savelnk = function(){
    localStorage.setItem(appWindow.label+'-data',JSON.stringify(lnks));
}

const getlnk = function(){
    let str:string|null = localStorage.getItem(appWindow.label+'-data');
    if(str){
        return JSON.parse(str);
    }else{
        localStorage.setItem(appWindow.label+'-data',JSON.stringify([]));
        return [];
    }
}
//#endregion
appWindow.setResizable(false);

</script>

<template>
<div ref="folder" v-show="show" class="folder" @dragover="dragover"  @drop="drop">
    <div draggable="true" @dragstart="dragstart($event,index,item)" @dragover="dragover" @drop="droplnk($event,index,item)" class="grid-item" @click="execCommand(item.exec)" v-for="(item,index) in lnks">
        <img draggable="false" :src="item.img" :alt="item.program" class="grid-img">
    </div>
</div>
<right-menu></right-menu>
</template>

<style scoped>
.folder{
    width: 100vw;
    height: 100vh;
    border-radius: 25px;
    box-sizing: border-box;
    background: rgba(217,217,217,0.1);
    padding: 5px 5px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
}
.grid-item{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 5px 5px;
    /* box-shadow: 0px 0px 15px 15px rgba(217,217,217,0.2) inset; */
    /* box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5); */
}
.grid-item:hover{
    box-shadow: 0px 0px 15px 15px rgba(217,217,217,0.2) inset; 
}
.grid-img{
    width: 40px;
    height: 40px;
    margin: 10px;
    border-radius: 5px;
}
</style>